<!--
  我的消息页面
-->
<template>
  <div style="margin-top: 20px">
    <el-row>
      <el-col :span=6>
          <el-page-header @back="goBack" content="我的消息"></el-page-header>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col :span=20 :push=2>
        <el-tabs type="border-card">
          <el-tab-pane label="未读消息">
            <ul style="text-align: left">
              <li v-for="(item, index) in unreaded_messages">
                <el-link @click="openMessage(index,0)" type="danger" >{{index + 1}}.{{item.operationStr}}</el-link>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="已读消息">
            <ul style="text-align: left">
              <li v-for="(item,index) in readed_messages">
                <el-link @click="openMessage(index,1)" type="success" >{{index + 1}}.{{item.operationStr}}</el-link>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <el-dialog title="消息内容"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-row>
        <el-col :span=9 :push=3>
          <span>时间:{{date}}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span=20 :push=1>
          消息内容：{{Str}}
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
import instance from "../../utils/request";

export default {
  name: "Message",
  data(){
    return {
      Str:'',
      date:'',
      dialogVisible:false,
      readed_messages:[
      ],
      unreaded_messages:[
      ]
    }
  },
  methods:{
    goBack(){
      this.$router.push({path: '/index/worker/record'})
    },
    openMessage(i,read){
      let msgs;
      if(read == 1){
        msgs = this.readed_messages;
      }
      else {
        msgs = this.unreaded_messages;
        //把这条消息设为已读
        instance.delete('/api/worker/' + msgs[i].id).then(function (res) {

        }).catch(function (er) {
          console.log(err);
        });
      }
      this.date = msgs[i].operationDate;
      this.Str = msgs[i].operationStr;
      this.dialogVisible = true;
      this.getMsgs();
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    getMsgs(){
      this.unreaded_messages=[];
      this.readed_messages=[];
      let _this = this;
      instance.get('/api/worker/workerConfirm').then(function (res) {
        if(res.data.code === 200){
          //消息通知处理
          console.log(res.data.data);
          for(let i = 0; i < res.data.data.length; i++){
            if(res.data.data[i].checked === 1){
              _this.readed_messages.push(res.data.data[i]);
            }
            else {
              _this.unreaded_messages.push(res.data.data[i]);
            }
          }
        }
        else{
          //响应码！=200时的逻辑
          if(res.data.code === 217){
            alert('当前没有消息！');
            _this.readed_messages=[];
            _this.unreaded_messages=[];
          }
        }
      }).catch(function (err) {
        alert('出错啦');
        console.log(err);
      });
    }
  },
  created() {
    this.getMsgs();
  }
}
</script>

<style scoped>

</style>
